<!--  -->
<template>
    <div class="mask" @click="$emit('closeTip')" v-if="tipFlag">
        <div class="content" @click.stop>
            <div class="f-18 f-bold text-center">购买成功</div>
            <div class="f-14 mt-40">感谢您预购此产品！</div>
            <div class="f-14 mt-8">您获得的能量将自动兑换为本期的幸运号</div>
            <div class="luck mt-22 flex aligin-center">
                <span class="f-14 color-gray">幸运号:</span>
                <span class="f-18 ml-14">{{luckCode}}</span>
            </div>
            <div class="mt-38">
                幸运号可在 <span class="color-red">订单—订单详情</span> 中查看
            </div>
            <div class="btn flex justify-center aligin-center f-18 f-medium mt-26" @click="$emit('tipConfirm')">确定</div>
        </div>
    </div>
</template>

<script>
export default {
  components: {},
  props: {
    luckCode:{
      type:String,
      default:()=>{
        return ""
      },
      required:true
    },
    tipFlag: {
      type: Boolean,
      default: () => {
        return false;
      },
      required: true
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../assets/style/mixin"); //引入公共css类
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  &::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
}
.content {
  display: inline-block;
  vertical-align: middle;
  z-index: 3;
  padding: 16px 33px 26px;
  width: 345px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
  animation: show 0.3s 1;
  @keyframes show {
    0% {
      opacity: 0;
      transform: scale(1.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  .text-center {
    text-align: center;
  }
  .luck {
    padding: 0 18px;
    height: 50px;
    box-sizing: border-box;
    background: rgba(250, 250, 250, 1);
    border: 1px solid rgba(240, 240, 240, 1);
  }
  .btn{
      height: 49px;
      color: #fff;
      .bg-1();
  }
}
</style>